<template>
    <div class="login container backgroundColor">
      <!--<Header content=""></Header>-->
      <!--<router-link to="/home" class="loginIcon">-->
        <!--<img src="../assets/img/close.png" alt="" style="width: 20px;">-->
      <!--</router-link>-->
      <div class="logo">
        <img src="../assets/img/logo.png" alt="" style="width:30%;">
      </div>
      <div class="input">
        <group>
          <x-input name="mobile" placeholder="请输入用户名" v-model="email" class="font15"></x-input>
        </group>
        <group>
          <x-input name="email" placeholder="请输入密码" :type="passwordType" v-model="pwd" class="font15" style="margin-bottom: 0">
            <img src="../assets/img/closeEye.png" class="imgHW" alt="" slot="right" v-if="!openEye" @click="changePwdType">
            <img src="../assets/img/openEye.png" class="imgHW" alt="" slot="right" v-if="openEye" @click="changePwdType">
          </x-input>
          <div class="right font12 defaultColor" style="margin-top: 5px;">
            <span @click="$router.push('/forgetLoginPwd')">忘记密码？</span>
          </div>
        </group>
        <div style="margin-top: 28px;">
          <x-button type="primary" @click.native="loginClick" :disabled="disabled">登录</x-button>
        </div>
        <div class="font14 center" style="margin-top: 30px;">
          <span style="color:#ffffff;">还没账户，</span>
          <span class="defaultColor" @click="$router.push('/register')">去注册</span>
        </div>
      </div>
    </div>
</template>
<script>
  import Header from './common/header.vue'
  import { XInput,Group } from 'vux'
    export default{
        data(){
            return {
              openEye: false,
              passwordType:'password',
              btnFlag:false,
              disabled:false,
              email:'',
              pwd:'',
              imgCode:''
            }
        },
      methods:{
        changePwdType(){
          this.passwordType = this.passwordType === 'password'?'text':'password';
          this.openEye = !this.openEye;
        },
        regFn(){
          if(!this.email){
            this.toastFn('请输入用户名');
            return false;
          }
          if(this.pwd.length<6 || this.pwd.length>64){
            this.toastFn('请输入6到64位的密码');
            return false;
          }
          return true;
        },
        loginClick(){
          if(this.regFn()){
            this.login();
          }
        },
        goTo(){
          this.$router.push('/forgetLoginPwd');
        },
        login(){
          this.disabled = true;
          this.service('login',{
            phone:this.email,
            password:this.pwd
          },'post').then((res) =>{
            this.disabled = false;
            if(res.code ===200){
              localStorage.setItem('token',res.data.userinfo.token);
              localStorage.setItem('userinfo',JSON.stringify(res.data.userinfo));
              this.toastFn(res.msg,'','success');
              this.$router.push('/guess');
//              this.service('getinfo',{},'get').then(res=>{
//                if(res.data.code == 200){
//                  this.commit('setInfo',res.data.data.userinfo)
//                  localStorage.setItem('userinfo',JSON.stringify(res.data.data.userinfo));
//                }
//              }).catch(error=>{
//                reject(error)
//              })
              return;
            }else{
              localStorage.clear('userinfo');
            }
            this.toastFn(res.msg);
          })
        }
      },
      components:{
        XInput,
        Group,
        Header
      }
    }
</script>
<style>
  .login{
    position: relative;
  }
  .logo{
    padding-top: 45px;
    padding-bottom: 56px;
    text-align: center;
  }
  .login>.loginIcon>img{
    position: absolute;
    left: 15px;
    top:15px;
  }
  .login>.input{
    padding-left:6.6%;
    padding-right:6.6%;
  }
  .login .weui-cell{
    padding-left:10px;
    padding-right: 10px;
    background: #424252;
    height: 40px;
    box-sizing: border-box;
    margin-bottom: 20px;
  }
  .login .weui-input{
    color: #FFFFFF;
    font-size: 14px;
  }
  .login .weui-label{
    color: #8E8F97;
    font-size: 14px;
  }
  .login .weui-cells{
    background: none;
    margin-top:0
  }
  .login .weui-cells:before,.login .weui-cells:after{
    border: none;
  }
  .imgHW{
    width:18px;
  }
  .dialog-demo{
    padding:0 20px;
    box-sizing: border-box;
  }
  .dialog-demo .nc-container{
    margin:30px 0px;
  }
  .login .dialog-demo .weui-dialog{
    padding:0 20px;
    box-sizing: border-box;
  }
</style>
